Fork me on GitHub

HTML + CSS 笔记

发表于 | 分类于 ， | 热度: °C
字数统计: 2,426 | 阅读时长 ≈ 9

前言：

  1. HTML 标签；
  2. CSS 样式；

一、HTML 标签

1、HTML 是 HyperText Mark-up Language 的首字母简写，
    意思是超文本标记语言，超文本指的是超链接，标记指的是标签。

    <!--DOC 声明  DTD 文档  规定网页用什么版本的 HTML-->
    <!--这个代表 HTML5 的版本声明-->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>网页标题</title>
        </head>
        <body>
              网页显示内容
        </body>
    </html>
2、块元素标签(行元素)和内联元素标签(行内元素)

    1、块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
    
    2、内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。
3、空格、"<" 和 ">" 的字符实体为 &nbsp; &lt; 和 &gt;

详细笔记：HTML 标签笔记

二、CSS 样式

1. css 引入方式

1、内联式：通过标签的style属性，在标签上直接写样式。
    <div style="width: 100px; height: 100px;">...</div>

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
    <style type="text/css">
        ...
    </style>

3、外链式：通过link标签，链接外部样式文件到页面中。
    <link rel="stylesheet" type="text/css" href="css/main.css">

2. css 选择器

1、标签选择器
    div {color: red;}
    p {width: 100px;}
    
2、类选择器
    /*
        通过 .类名 调用名字  
    */
    .blue {color: blue;}
    
    /*
		通过 class 去定义名字；
		调用多个类名，类名与类名之间敲一个空格
	*/
    <div class="blue">...</div>
    
3、层级选择器
    /*
        选择了 div 的子孙后代 span 标签；一个空格代表一个后代
    */
    .con span {color: red;}
    
    <div class="con">
        <span>...</span>
    </div>

4、ID 选择器
    /*
		id 选择器是专门给 JS 使用的。
		而且是唯一性的，一个 id 只能被使用一次（针对 JS）
		平常做布局，都是用 class 的，ID 是给 JS 用的。
	*/
    #box {color: red;}
    
    <p id="box">这是一个段落标签</p>
    
5、组选择器
    /*
        组选择器什么情况用：当很多个元素都是执行同一样的CSS的时候
    */
    .box1,.box2 {width: 100px; height: 100px;}
    
    <div class="box1">...</div>
    <div class="box2">...</div>
    
6、伪类选择器
    /*
        :visited  点击过后的状态
	    :hover  鼠标悬停的状态，触发状态里面的所有代码。
	*/
	a {color: black;}
	a:visited {color: red;}
	
    .box1 {width: 100px; height: 100px;}
    .box1:hover {width: 300px;}

3. css 类属性

   text-decoration 设置文字的下划线，如：text-decoration: none; 将文字下划线去掉；underline 则加上
   
   text-align 设置文字水平对齐方式，如text-align: center; 设置文字水平居中
   
   text-indent 设置文字首行缩进，如：text-indent: 24px; 设置文字首行缩进24px
   text-indent: 2em; 1em代表1个中文字大小
   
   font-weight 字体加粗，font-weight: normal; 正常 / bold加粗
   
resize 设置文本域的拖拽功能，如：resize: none; 去掉设置<textarea>的拖拽功能
   
   list-style 去掉列表项的小圆点，比如：list-style: none;
   
   border 设置边框，如： border: 1px solid gray; (solid 实线; dotted 点线; dashed 虚线)
   
   background: rgba(0,0,0,0.5); 背景半透明属性（CSS3的属性）；前面三个值代表颜色，最后的值代表透明度
   
   cursor: pointer; 改变指针形状；pointer变成手指；move变成可拖拽的
   
   line-height: 1; 文字会默认有行高，设置为1，代表行的高等于文字的高度
   
border-radius:10px; 设置盒子的圆角属性
   
   /* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
   opacity:0.3;
   /* 兼容IE */
   filter:alpha(opacity=30);
   
   /* 强制换行 */
   word-break: break-all;

4. css 显示特性

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

    1、none 元素隐藏且不占位置
    
    2、inline 元素以行内元素显示
        行内的显示模式，代表标签：a,span,label
		特点：
		1.并排显示
		2.不能设置宽高
    
    3、block 元素以块元素显示
        块级的显示模式，代表标签：div,h1~h6,p,ul,li,table,form
		特点：
		1.独占一行
		2.能够设置宽高
	
	4、inline-block 元素以行内块元素显示
	    行内块的显示模式，代表标签：表单类的元素,img
		特点：
		1.并排显示
		2.能设置宽高

5. css 元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置。

overflow 的设置项： 

    1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
    
    2、hidden 内容会被修剪，并且其余内容是不可见的。
    
    3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    
    4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，内容无修剪，则没有滚动条。

6. css 权重

每个选择器都会分谁大谁小。如果权重值一样，看最后定义的，如果权重值不一样，就看谁的选择器比较大。

权重的等级
    可以把样式的应用方式分为几个等级，按照等级来计算权重：
    1、内联样式，如：style=''，权重值为 1000
    2、ID选择器，如：#content，权重值为 100
    3、类，伪类，如：.content、:hover，权重值为 10
    4、标签选择器，如：div、p，权重值为 1

7. css 初始化

/*
    CSS初始化，把标签默认的间距，行高清空
*/
html,body,div,h1,h2,h3,h4,h5,h6,p,table,label,span,a,img,input,select,textarea,option,tr,th,td,ul,li,form{font-size:14px;padding:0;margin:0;line-height:1;}
a{text-decoration: none;}

8. padding 内边距

内边距作用：隔开父盒子与子级内容之间的间距，一般都是父子级使用，而且都是给父元素去设置内边距
    
    padding：10px;  四个值按照顺时针方向，分别设置的是 上 右 下 左 四个方向的内边距值。
	padding: 10px 50px;  /*上下10px  左右50px*/
	padding: 10px 50px 100px;  /*上10px  左右50px  下100px*/
	padding: 10px 30px 60px 100px;  /*上右下左*/
	
    思考：如果给元素增加边框和内边距，又不想改变元素整体的尺寸，应该怎么做？
        
    答：在 width 和 height 的基础上减去由边框和内边距增加的尺寸，上面的元素，将 width 和 height 改成 100px，
    再加上四周 50px 的边框，四周 50px 的内边距，元素的宽高保持 300px 不变。

9. margin 外边距

外边距作用：盒子与盒子之间的距离。兄弟与兄弟之间的距离。
    
    块元素如果想设置相对页面水平居中，可以使用 margin 值中的 auto 关键字，"auto" 只能用于左右的 margin 设置
    
    margin 外边距问题（子级带着父亲跑了）
        什么时候会带着父亲跑？
    	当第一排子级，写了上外边距，就会带着父亲跑。

10. float 浮动

浮动是为了解决什么的？
    并排显示，贴边。

    float:left;
        左浮动，让元素贴着最左边，同时能够跟兄弟并排显示
    float:right;
        右浮动，让元素贴着最右边，同时能够跟兄弟并排显示
    
    浮动的元素，如果父级没有高，就相当于这个父级没有区域，浮动元素是不会占位置的（只占有本身内容宽高）。
        解决办法：元素如果用了浮动。那么父级就要加上高，不加高就会出问题
    
    让盒子贴着最右边，并且不改变顺序？
        解决办法：给他们套一个父盒子，给父盒子写右浮动，再给子级写左浮动

11. position 定位

1、文档流

    将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
    只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

2、定位属性

    static：无特殊定位，对象遵循正常文档流。top，right，bottom，left 等属性不会被应用。

    relative：对象遵循正常文档流，但将依据 top，right，bottom，left 等属性在正常文档流中偏移位置。而其层叠通过 z-index 属性定义。
    
    absolute：对象脱离正常文档流，使用 top，right，bottom，left 等属性进行绝对定位。而其层叠通过 z-index 属性定义。
    
    fixed：对象脱离正常文档流，使用 top，right，bottom，left 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过 z-index 属性定义。

    1. 相对定位特点：
        1.以自己为起点去移动的；2.占位置的
    
    2. 绝对定位特点：
        1.不占位置；2.默认以body为起点；3.任意标签都能设置宽高(脱离文档流)
        
        改变绝对定位的起点，方法：
        给父（长辈）元素设置相对定位，绝对定位就会以这个盒子为起点
        定位的口诀：子绝父（长辈）相
        
    3. 固定定位特点：1.不占位置；2.以可视区域（浏览器窗口）为起点；任何标签都能设置宽高（脱离文档流）
    
        定位的元素水平居中方法：
            1. 把left设置为50%；
            2. margin-left:-自身宽度度的一半px;
                left: 50%; margin-left: -20px;
        
        定位的元素垂直居中方法：
            1. 把top设置为50%；
            2. margin-top:-自身高度的一半px;
                top: 50%; margin-top: -20px;

    4. 偏移量冲突问题
        水平方向冲突，听 left 的；垂直方向冲突，听 top 的；
        
    5. z-index
        解决定位谁压着谁的问题。数值越大，越靠前。
        默认的数值是0
        使用前提：只有定位才能使用z-index
-------------本文结束感谢您的阅读-------------

本文标题:HTML + CSS 笔记

文章作者:曹永林

发布时间:2018年08月01日 - 09:08

最后更新:2018年08月09日 - 10:08

原始链接:http://jovelin.cn/2018/08/01/HTML + CSS 笔记/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。